<template>
    <basic-container>
        <avue-form  ref="form"
                    v-model="obj"
                    :option="option">
            <template slot="table" slot-scope="scope">
                <avue-crud :option="materialOption"
                           :data="data"
                           @on-load="onLoad"
                           :page.sync="page"
                           :table-loading="loading"
                           @search-change="searchChange"
                           @search-reset="searchReset"
                           @current-change="currentChange"
                           @size-change="sizeChange"
                           @refresh-change="refreshChange">
                </avue-crud>
            </template>
          <template slot-scope="scope" slot="handleFlow">
            <el-image z-index="9999999999" style="width: 100px; height: 100px" :src="obj.handleFlow" :preview-src-list="[obj.handleFlow]">
              <div slot="error" class="image-slot">
                <i class="el-image__error" style="margin-top: 41px">{{validatenull(obj.handleFlow) ? '暂无图片':'加载失败'}}</i>
              </div>
            </el-image>
          </template>
        </avue-form>
    </basic-container>
</template>
<script>
    import {optionGuide} from "@/option/acceptance/serviceItem";
    import {materialPage} from "@/api/acceptance/serviceItem";
    import {mapGetters} from "vuex";
    import {validatenull} from "@/util/validate";

    export default {
        name: "service-guide",
        components: {},
        data() {
            return {
                obj: {},
                option: optionGuide,
                //材料
                materialOption: {
                    border: true,
                    index: true,
                    indexLabel: "序号",
                    viewBtn: false,
                    simplePage: true,
                    editBtn: false,
                    addBtn: false,
                    delBtn: false,
                    refreshBtn: false,
                    align: 'center',
                    columnBtn: false,
                    menu: false,
                    column: [
                        {
                            label: "材料名称",
                            prop: "materialName",
                            width: '600px',
                            align: 'left',
                        },
                        {
                            label: "材料类型",
                            prop: "materialType",
                            type: "select",
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=material_type",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                        },
                        {
                            label: "材料形式",
                            prop: "materialFormat",
                            type: "select",
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=material_format",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                        }, {
                            label: "材料必要性",
                            prop: "isNeed",
                            type: "select",
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=is_need",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                        }
                    ]

                },
                page: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                loading: false,
                data: [],
                query: {}
            };
        },
        computed: {
            ...mapGetters(["permission"]),
        },
        props: {
            serviceItem: {}
        },
        created(){
            this.filterPlaceholder();
            this.initData();
        },
        methods: {
            initData(){
                this.obj = this.serviceItem;
                this.obj.serverType = this.obj.serverType.replace("^",",");
                this.obj.handleType = this.obj.handleType.replace("^",",");
            },
            onLoad(page, params = {}) {
                this.loading = true;
                params.taskCode = this.serviceItem.taskCode;
                params.taskType = this.serviceItem.taskType;
                params.taskGuid = this.serviceItem.rowGuid;
                materialPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    const data = res.data.data;
                    this.page.total = data.total;
                    this.data = data.records;
                    this.loading = false;
                });
            },
            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.page.currentPage = 1;
                this.onLoad(this.page, params);
                done();
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page, this.query);
            },
            filterPlaceholder(){
              this.option.group.forEach(g => {
                g.column.forEach(c =>{
                  c.placeholder = false;
                })
              })
            }
        },
        watch: {}
    };
</script>
<style scoped lang="scss">
    /deep/.avue-crud__menu {
        min-height: 0px;
    }
    ///deep/.el-input.is-disabled .el-input__inner {
    //    background-color: #FFF;
    //    color: #606266;
    //}
    ///deep/.el-textarea.is-disabled .el-textarea__inner {
    //    background-color: #FFF;
    //    color: #606266;
    //}
</style>
